<template>
  <p>AAAA</p>
  <!-- 显示不需要使用value -->
  <!-- <p>{{ num }}</p> -->
  <!-- <p>{{ rmb }}</p> -->
  <p>{{ num }}</p>
  <button @click="add">add</button>
</template>

<script>
// 响应式API
import {
  reactive,
  ref,
  onBeforeMount,
  toRefs,
  toRef,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  watch,
  computed,
  readonly,
} from "vue";

export default {
  name: "A",
  props: ["age"],
  emits: ["aaa"],
  // 组合式API  composition API
  // 生命周期函数
  setup(props, context) {
    console.log("setup");
    // 定义生命周期函数
    // setup 相应于 beforeCreate created
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
    // 定义响应式数据
    // 定义多个响应式数据
    let state = reactive({
      a: 123,
      b: 456,
      num: 0,
    });

    // console.log(this); // 没有this
    console.log(props);
    console.log(context.attrs); // attrs
    context.emit("aaa"); // 触发自定义事件

    const num = ref(0);

    // 只读数据
    // state = readonly(state);

    // 定义watch
    watch(
      // 要监视的数据
      // num,
      () => state.num,
      // 一旦数据变化触发的回调
      (newValue, oldValue) => {
        console.log(oldValue, newValue);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    // 定义计算属性
    const rmb = computed(() => state.num + "元");
    // const rmb = computed({
    //   get: () => state.num + "元",
    //   set: (val) => (state.num = val),
    // });

    // 定义method
    const add = () => {
      // 更新/操作时，操作的是value
      // num.value++;
      state.num++;
    };

    // 返回对象，对象上的属性会添加到组件实例对象this上
    return {
      // num,
      // num: state.num, // 直接写，数据就不是响应式
      // num: toRefs(state).num,
      // ...toRefs(state), // 全部
      num: toRef(state, "num"), // 单个
      state,
      add,
      rmb,
    };
  },
};
</script>

<style scoped>
</style>
